<style scoped>
.permissions {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.od-btn {
  padding: 15px 0;
}
.od-tab {
  display: flex;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_vs,
.change_vs,
.accredit,
.QRcode {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background-color: white;
  height: auto;
}
.new_vs {
  width: 600px;
  height: 500px;
}
.change_vs {
  width: 365px;
  height: 450px;
}
.change_info p {
  display: inline-block;
  line-height: 40px;
  margin-right: 10px;
  text-align: right;
}
.change_info div:last-child p {
  width: 65px;
}
.vs-top {
  height: 40px;
  background-color: #f8f8f8;
}
.vs-top p {
  float: left;
  line-height: 40px;
  padding-left: 20px;
  font-weight: bold;
}
.vs-top i {
  float: right;
  line-height: 40px;
  padding: 0 16px;
}
.vs-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 20px 20px 0;
}
.change_vs p {
  display: inline-block;
}
.change_info {
  width: 320px;
  margin: 20px 25px 0;
}

.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
.accreditInfo > div {
  display: flex;
  margin: 0 10px;
  justify-content: space-between;
}
.accreditInfo > div:first-child {
  background-color: #f7f7f7;
  margin-top: 20px;
  line-height: 40px;
}
.accreditInfo > div:last-child {
  margin-bottom: 20px;
  border-top: solid 1px #f8f8f8;
  border-bottom: solid 1px #f8f8f8;
}
.accreditInfo > div p {
  width: 150px;
  line-height: 40px;
}
.blue {
  color: #017aff;
  cursor: pointer;
}
.banks {
  display: flex;
}
.banks span {
  width: 80px;
  text-align: center;
}
.bold {
  font-weight: bold;
  margin-left: 20px;
}
.QRcode {
  text-align: center;
}
.QRcode canvas {
  margin: 0 auto;
}
.QRcode div:last-child {
  margin: 10px;
}
.innerImg {
  width: 50px;
  top: 185px;
  left: 240px;
  height: 50px;
  position: fixed;
}
.payMask {
  position: fixed;
  top: 80px;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 58%;
  z-index: 10;
}
.payMask img {
  width: auto;
  height: auto;
  max-width: 200px;
  margin-top: 50px;
}
</style>

<style>
.permissions .el-input__icon {
  line-height: 30px;
}
.permissions .change_vs .el-input,
.permissions .change_vs .el-input__inner {
  height: 30px;
  width: 245px;
}
.accreditInfo .el-input,
.accreditInfo .el-input__inner {
  width: 160px;
  height: 30px;
  margin-top: 3px;
  margin-right: 10px;
}
</style>

<template>
  <div class="permissions">
    <div class="od-btn">
      <el-button @click="addClerk" icon="el-icon-plus" type="primary"
        >添加</el-button
      >
      <el-button
        @click="
          () => {
            this.showPermission = true
          }
        "
        icon="el-icon-lock"
        >权限</el-button
      >
      <el-button @click="dele" icon="el-icon-delete">删除</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      highlight-current-row
      :header-cell-style="{ background: '#f4f4f4', padding: 0, height: '40px' }"
      :cell-style="{ padding: 0, height: '36px' }"
      height="87vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="userId" label="用户名称"></el-table-column>
      <el-table-column
        prop="userName2"
        label="用户名称2"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="showCostSwitch"
        label="查看成本"
        width=""
      ></el-table-column>
      <el-table-column
        prop="shippingAmountIsValidSwitch"
        label="出货金额下限有效"
        width=""
      ></el-table-column>
      <el-table-column
        prop="receivingPermissionSwitch"
        label="收货权限"
      ></el-table-column>
      <el-table-column
        prop="importCustomerInfoSwitch"
        label="导出客户资料"
      ></el-table-column>
      <!-- <el-table-column prop="" label="成本权限"></el-table-column> -->
      <el-table-column prop="monthlySwitch" label="月结"></el-table-column>
      <el-table-column prop="changeOrderSwitch" label="改单"></el-table-column>
      <el-table-column
        prop="isPrincipalSwitch"
        label="部门主管"
      ></el-table-column>
      <el-table-column label="小程序授权">
        <template slot-scope="scope">
          <p v-if="scope.row.isAuthorization">已授权</p>
          <p v-else @click="showAcc(scope.row)" class="blue">去授权</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="60">
        <template slot-scope="scope">
          <p @click="change(scope.row)" class="blue">修改</p>
        </template>
      </el-table-column>
    </el-table>

    <!-- <foot-view class="footView">
      <div slot="text">
        <span>数据库：倪姐夏18年2</span>
      </div>
    </foot-view> -->

    <div
      class="mask"
      v-show="
        showNew || showPassword || showPermission || showAccredit || showQR
      "
    ></div>
    <div class="new_vs" v-show="showNew">
      <div class="vs-top">
        <p>添加职员</p>
        <i
          class="el-icon-close"
          @click="
            () => {
              this.showNew = false
            }
          "
        ></i>
      </div>
      <el-table
        :data="tableData2"
        style="width: 550px; margin: 20px 25px 0"
        height="370"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '36px' }"
        @selection-change="handleSelectionChange2"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="no" label="职员编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="职员名称" width="180">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="department" label="部门">
        </el-table-column>
      </el-table>
      <div class="vs-btn">
        <el-button @click="confirmAdd" type="primary">添加</el-button>
      </div>
    </div>

    <div class="change_vs" v-show="showPassword">
      <div class="vs-top">
        <p>修改口令</p>
        <i
          class="el-icon-close"
          @click="
            () => {
              this.showPassword = false
            }
          "
        ></i>
      </div>
      <div class="change_info">
        <div>
          <p>用户名称</p>
          <el-input v-model="input1" disabled></el-input>
          <p>进入口令</p>
          <el-input v-model="input2" type="password" clearable></el-input>
          <p>改删口令</p>
          <el-input v-model="input3" type="password" clearable></el-input>
          <p>权限口令</p>
          <!-- <el-input v-model="input4" type="password" ></el-input> -->
          <el-input v-model="input4" type="password" clearable></el-input>
        </div>
        <div>
          <p>查看成本</p>
          <el-switch v-model="value1"></el-switch>
          <p style="width: 150px">出货金额下限有效</p>
          <el-switch v-model="value2"></el-switch>
          <p>收货权限</p>
          <el-switch v-model="value3"></el-switch>
          <p style="width: 150px">导出客户资料</p>
          <el-switch v-model="value4"></el-switch>
          <p>月结</p>
          <el-switch v-model="value5"></el-switch>
          <p style="width: 150px">改单</p>
          <el-switch v-model="value6"></el-switch>
          <p>部门主管</p>
          <el-switch v-model="value7"></el-switch>
        </div>
      </div>

      <div class="vs-btn">
        <el-button @click="confirmChange" type="primary">确定</el-button>
      </div>
    </div>

    <div class="accredit" v-show="showAccredit">
      <div class="vs-top">
        <p>小程序授权</p>
        <i
          class="el-icon-close"
          @click="
            () => {
              this.showAccredit = false
            }
          "
        ></i>
      </div>
      <div class="accreditInfo">
        <div>
          <p>用户名称</p>
          <p>手机号码</p>
          <p>操作</p>
        </div>
        <div>
          <p>{{ accreditName }}</p>
          <el-input v-model="accreditPhone"></el-input>
          <p class="blue" @click="pay">去授权</p>
        </div>
      </div>
    </div>

    <div class="QRcode" v-show="showQR">
      <div class="vs-top">
        <p>支付方式</p>
        <i
          class="el-icon-close"
          @click="
            () => {
              this.showQR = false
              this.QRfin = false
            }
          "
        ></i>
      </div>
      <div>
        <div class="payMask" v-show="QRfin">
          <img src="../../../assets/pay/9.png" alt="" />
        </div>
        <p class="bold">支付金额：{{ buyMoney }}</p>
        <canvas id="canvas"></canvas>
        <img class="innerImg" src="../../../assets/pay/8.png" />
        <div class="banks">
          <span>
            <img src="../../../assets/pay/1.png" />
            <p>微信支付</p>
          </span>
          <span>
            <img src="../../../assets/pay/2.png" />
            <p>支付宝</p>
          </span>
          <span>
            <img src="../../../assets/pay/3.png" />
            <p>QQ钱包</p>
          </span>
          <span>
            <img src="../../../assets/pay/4.png" />
            <p>京东钱包</p>
          </span>
          <span>
            <img src="../../../assets/pay/5.png" />
            <p>口碑</p>
          </span>
          <span>
            <img src="../../../assets/pay/6.png" />
            <p>翼支付</p>
          </span>
        </div>
      </div>
    </div>

    <permission-setting
      v-show="showPermission"
      @closePS="
        () => {
          this.showPermission = false
        }
      "
      :operatorList="operatorList"
    >
    </permission-setting>
  </div>
</template>

<script>
import {
  alreadyOperatoryCommandList,
  operatoryCommand,
  operatoryModify,
  warrant
} from '../../../network/operatoryCommand'
import { getEdition, postPayment } from '../../../network/payment'
import { internetProtocol } from '../../../config/ip'

import footView from '../../../components/FootView'
import permissionSetting from './childComp/PermissionSetting'

import checkPhone from '../../../components/mixins/checkPhone'

import QRCode from 'qrcode'

export default {
  mixins: [checkPhone],
  name: 'permissions',
  created() {
    this.getList(true)
  },
  data() {
    return {
      pwd: '',
      showNew: false,
      showPermission: false,
      showPassword: false,
      showAccredit: false,
      showQR: false,
      QRfin: false,

      tableData: [],
      tableData2: [],

      addClerkList: [],
      deleClerkList: [],

      input1: '',
      input2: '',
      input3: '',
      input4: '',
      value1: false,
      value2: false,
      value3: false,
      value4: false,
      value5: false,
      value6: false,
      value7: false,

      operatorList: [], // 操作员名称列表

      changeROW: {},

      accreditName: '',
      accreditPhone: '',
      accreditID: '',
      userId: '',
      version: document.cookie.match(RegExp('jxVersionType' + '=([^;]+)'))[1],
      buyMoney: '',
      socketId: '',
      ws: {}
    }
  },
  methods: {
    showAcc(row) {
      this.showAccredit = true
      this.accreditName = row.userName2
      this.accreditID = row.personnelId
      this.userId = row.userId
    },
    change(row) {
      // console.log(row)
      this.showPassword = true
      this.changeROW = row
      this.input1 = row.userName2
      this.input2 = row.inputCommand
      this.input3 = row.updateCommand
      this.input4 = row.deleteCommand
      this.value1 = row.showCost ? true : false
      this.value2 = row.shippingAmountIsValid ? true : false
      this.value3 = row.receivingPermission ? true : false
      this.value4 = row.importCustomerInfo ? true : false
      this.value5 = row.monthly ? true : false
      this.value6 = row.changeOrder ? true : false
      this.value7 = row.isPrincipal ? true : false
    },
    handleSelectionChange(e) {
      // console.log(e)
      this.deleClerkList = e
    },
    handleSelectionChange2(e) {
      this.addClerkList = e
    },
    addClerk() {
      this.showNew = true
      this.getList(false)
    },
    confirmAdd() {
      if (!this.addClerkList.length) {
        this.$alert('请选择要添加的职员', '', {
          confirmButtonText: '确定'
        })
        return
      }
      let count = this.addClerkList
      this.addClerkList.forEach((e) => {
        operatoryCommand({ personnelId: e.id }).then((res) => {
          console.log(res)
          this.pwd = res.data.data
          if (res.data.code == 200) count--
        })
      })
      let int = setInterval(() => {
        if (!count) {
          clearInterval(int)
          this.getList(true)
          this.getList(false)
          this.showNew = false
          this.$message({
            message: `添加成功 账号：${this.pwd},密码：666666`,
            type: 'success'
          })
        }
      }, 500)
    },
    confirmChange() {
      if (this.input3.length > 6 || this.input4.length > 6) {
        this.$alert('改单和删单口令最大设置6位', '', {
          confirmButtonText: '确定'
        })
        return
      }
      let r = /^\d*$/
      if (!r.test(this.input3)) {
        this.$alert('改单口令只能设置数字', '', {
          confirmButtonText: '确定'
        })
        return
      }
      if (!r.test(this.input4)) {
        this.$alert('删单口令只能设置数字', '', {
          confirmButtonText: '确定'
        })
        return
      }
      ;(this.changeROW.showCost = this.value1 ? 1 : 0),
        (this.changeROW.shippingAmountIsValid = this.value2 ? 1 : 0),
        (this.changeROW.receivingPermission = this.value3 ? 1 : 0),
        (this.changeROW.importCustomerInfo = this.value4 ? 1 : 0),
        (this.changeROW.monthly = this.value5 ? 1 : 0),
        (this.changeROW.changeOrder = this.value6 ? 1 : 0),
        (this.changeROW.isPrincipal = this.value7 ? 1 : 0),
        (this.changeROW.inputCommand = this.input2)
      this.changeROW.updateCommand = this.input3
      this.changeROW.deleteCommand = this.input4
      // console.log(this.changeROW)
      operatoryModify(JSON.stringify(this.changeROW)).then((res) => {
        // console.log('菜单列表', res)
        if (res.data.code == 200) {
          this.getList(true)
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.showPassword = false
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    dele() {
      if (!this.deleClerkList.length) {
        this.$alert('请选择要删除的职员', '', {
          confirmButtonText: '确定'
        })
        return
      }
      let count = 0
      this.deleClerkList.forEach((e) => {
        e.status = 1
        operatoryModify(JSON.stringify(e)).then((res) => {
          if (res.data.code == 200) {
            count++
          } else {
            this.$message.error('删除失败')
            return
          }
        })
      })
      let delLen = this.deleClerkList.length
      let int = setInterval(() => {
        if (count == delLen) {
          clearInterval(int)
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList(true)
        }
      })
    },
    getList(flag) {
      if (flag) {
        alreadyOperatoryCommandList({ flag: true }).then((res) => {
          // console.log(res)
          if (res.data.code == 200) {
            this.operatorList = []
            this.tableData = res.data.data
            this.tableData.forEach((e) => {
              e.userName2 = e.userId + '.' + e.userName
              this.operatorList.push({ value: e.userId, label: e.userName })
              e.showCostSwitch = e.showCost ? 'YES' : 'NO'
              e.shippingAmountIsValidSwitch = e.shippingAmountIsValid
                ? 'YES'
                : 'NO'
              e.receivingPermissionSwitch = e.receivingPermission ? 'YES' : 'NO'
              e.importCustomerInfoSwitch = e.importCustomerInfo ? 'YES' : 'NO'
              e.monthlySwitch = e.monthly ? 'YES' : 'NO'
              e.changeOrderSwitch = e.changeOrder ? 'YES' : 'NO'
              e.isPrincipalSwitch = e.isPrincipal ? 'YES' : 'NO'
            })
          }
        })
      } else {
        alreadyOperatoryCommandList({ flag }).then((res) => {
          if (res.data.code == 200) {
            this.tableData2 = res.data.data
          }
        })
      }
    },
    pay() {
      if (this.checkPhoneNumber(this.accreditPhone)) {
        warrant({
          personnelId: this.accreditID,
          accountNumber: this.accreditPhone
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success('授权成功')
            this.showQR = false
            this.accreditPhone = ''
            this.getList(true)
          } else if (res.data.code == 201) {
            getEdition().then((res) => {
              for (const i of res.data.data) {
                if (this.version == i.type) {
                  this.buyMoney = i.authorizationMoney
                  break
                }
              }
            })
            this.socketId = Math.ceil(Math.random() * 1000000) + ''
            this.ws = new WebSocket(
              `wss://${internetProtocol}/webSocket/${this.socketId}`
            )
            this.ws.onopen = (e) => {
              // console.log(e)
              postPayment({
                versionMoneyId: this.version,
                payType: 3,
                payWay: 0,
                sid: this.socketId,
                checkInvoiceInfo: false,
                paymentAccount: this.accreditPhone,
                userId: this.userId
              }).then((res) => {
                this.showAccredit = false
                this.showQR = true
                let canvas = document.getElementById('canvas')
                QRCode.toCanvas(
                  canvas,
                  String(res.data.data),
                  { height: 270, width: 270 },
                  (error) => {
                    if (error) console.error(error)
                  }
                )
              })
            }
            this.ws.onmessage = (e) => {
              if (e.data == 'scanSuccess') {
                this.$message.info('扫码成功')
                this.QRfin = true
              }
              if (e.data == 'paySuccess') {
                this.$message.success('支付成功')
                this.showQR = false
                this.QRfin = false
                this.getList(true)
                this.accreditPhone = ''
                this.ws.close()
              }
            }
          }
        })
      }
    }
  },
  components: {
    footView,
    permissionSetting,
    QRCode
  }
}
</script>
